import React, { useState ,useEffect} from 'react';
import axios from 'axios';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import RefreshIcon from '@mui/icons-material/Refresh';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import PersonIcon from '@mui/icons-material/Person';
import HistoryIcon from '@mui/icons-material/History';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import PaymentIcon from '@mui/icons-material/Payment';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';

const ariaLabel = { 'aria-label': 'description' };


export default function Content() {
  const [open, setOpen] = React.useState(true);
  const [rows2, setRows2] = useState([]);
  
  const [formData, setFormData] = useState({
    amount: ''
  });



  useEffect(() => {
    axios.get('http://172.24.56.192:5000/index/wallet',{headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then(function (response) {
                    // 这里是处理响应的代码
                  // var code = response['code']
                  setRows2(response.data['data']);
                  console.log(response.data);
                    
                })
                .catch(function (error) {
                    // 这里是处理错误的代码
                  // window.location.href="https://www.baidu.com/"
                    console.log(error);
                  
                });},[]);

  const handleClick = () => {
    setOpen(!open);

    axios.post('http://172.24.56.192:5000/index/wallet', formData,{headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
      }})
      .then(response => {
        // 处理成功响应
        console.log(formData);
        console.log(response.data);
        alert('success')
        window.location.href="AppHome_Aut_2";

        // 在这里进行其他操作，如更新状态、显示成功提示等
      })
      .catch(error => {
        // 处理错误
        console.error(error);
        // 在这里进行其他操作，如显示错误提示等
      });





  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };



  return (
    <Paper sx={{ maxWidth: 2000, margin: 'auto', overflow: 'hidden' }}>
      



          <List
            sx={{ width: '100%', maxWidth: 2000, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
          >



            <Grid container spacing={2}>

              <Grid item xs={2}> 
                <ListItemButton>
                  <ListItemIcon>
                    <AccountBalanceIcon />
                  </ListItemIcon>
                  <ListItemText primary="My Funds" primaryTypographyProps={{color: 'primary'}}/>  
                </ListItemButton>
              </Grid> 

              <Grid item xs={10}>
                <ListItemButton>
                  <ListItemText primary={rows2} primaryTypographyProps={{color: 'green'}}/>  
                </ListItemButton> 
              </Grid>  

              <Grid item xs={2}>
                <ListItemButton>
                  <ListItemIcon>
                    <PaymentIcon />
                  </ListItemIcon>
                  <ListItemText primary="Recharge" primaryTypographyProps={{color: 'primary'}}/>  
                </ListItemButton>
              </Grid>

              <Grid item xs={2}>
                <Box
                   component="form"
                   sx={{
                     '& > :not(style)': { m: 1 },
                   }}
                   noValidate
                   autoComplete="off"
                 >
                   <Input             
                    placeholder="Amount"
                    name="amount"
                    value={formData.amount}
                    onChange={handleInputChange} 
                  />
                </Box>
              </Grid>

              <Grid item xs>
                <Button variant="outlined" color="success" onClick={handleClick}>
                  Confirm
                </Button>
              </Grid>





            </Grid>






            
          </List>
     
    </Paper>
  );
}